<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            background-color: pink;
            height: 150px;
            margin:  20px auto;
        }
        @keyframes enter{
            0%{
                transform: translateX(-500px) rotate(360deg);
                opacity: 0;
            }
            50%{
                transform: translateX(-200px) rotate(80deg);
                opacity: .5;
            }
            100%{
                transform: translateX(0) rotate(0);
                opacity: 1;
            }
        }
        @keyframes leave {
            0%{
                transform: translateY(0) rotate(0) ;
                opacity: 1;
            }
            50% {
                transform: translateY(200px) rotate(180deg) ;
                opacity: 0.5;
            }
            100% {
                transform: translateY(500px) rotate(0) ;
                opacity: 0;
            }
        }
        .ani-enter-active{
            animation: enter 500ms;
        }
        .ani-leave-active{
            animation: leave 500ms;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <home></home>
        <hr>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const child={
        template:`
            <div class='box'>
                <span>我是子组件</span>
            </div>
        
        `
    }
    const mixin={
        components:{
            child
        },
        data(){
            return{
                IsShow:true
            }
        }
    }
    const home={
        template:`
            <div>
                <span>我是全局组件</span>
                <button @click='IsShow=!IsShow'>{{IsShow?'隐藏':'显示'}}</button>
                <transition name='ani'>
                    <child v-if='IsShow'></child>   
                </transition>
            </div>
        
        `,
        mixins:[mixin]

    }
    Vue.component('Home',home)
    const vm=new Vue({
        el:'#app',

    })
</script>
</html>